<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
import headerUtil from "./base/common/headerUtil.vue";
import commentTextUtil from "./base/comment/commentTextUtil.vue";
import productCartUtil from "./base/product/productCartUtil.vue";
import starUtil from "./base/comment/starUtil.vue";

import reqApis from '../req/reqApis.js';


const scrollOutRef = ref();

const currentData = ref<any>({
  headerObj: {
    showType: 2
  },
  productId: router.currentRoute.value.query.productId,
  typeNum: 0,
  list: [],
  isStop: false,
  commentStatus: 0,
  type: 0,
  pageIndex: 1,
  pageSize: 10
});



const getCommentProductFn = () => {
  if(!currentData.value.isStop){
    let params = {
      page: currentData.value.pageIndex,
      size: currentData.value.pageSize,
      commentStatus: currentData.value.commentStatus
    };
    console.log(111)
    reqApis.getCommentProductApi(params).then((res:any) => {
      if(res.data != null && res.data.length>0){
        currentData.value.list.push(...res.data)
        console.log(currentData.value.list)
      }else{
        currentData.value.isStop = true
      }
    })
  }
  
};

const scrollData = () => {
  let outH = scrollOutRef.value.scrollHeight,
      currentH = scrollOutRef.value.offsetHeight,
      offH = scrollOutRef.value.scrollTop;
    if(currentH + offH >= (outH-1)){
      currentData.value.pageIndex += 1;
      getCommentProductFn();
    }
};

const getCommentFn = (num:any) => {
  currentData.value.commentStatus=num;
  currentData.value.pageIndex = 1;
  currentData.value.pageSize = 10;
  currentData.value.isStop = false;
  currentData.value.list = [];
  getCommentProductFn();
};

const toRouter = (detailId:any) => {
  router.push({path: "/addComment", query: {id: detailId}});
}

getCommentProductFn();
</script>
<template>
  <section class="comment">
    <headerUtil :obj="currentData.headerObj">我的评价</headerUtil>
    <div class="commentTab">
      <div class="wait" @click="getCommentFn(0)" :class="{'active':currentData.commentStatus==0}">待评价</div>
      <div class="done" @click="getCommentFn(1)" :class="{'active':currentData.commentStatus==1}">已评价</div>
    </div>
    <div class="content"  @scroll.passive="scrollData" ref="scrollOutRef">
      <div class="orderDetail" v-for="(item, index) in currentData.list"  :key="index">
        <div class="productIcon"  :style="{background: `url(${item.productIcon}) no-repeat center`}"></div>
        <div class="productContent">
          <div class="name">{{item.productName}}</div>
          <div class="btnWrap">
            <div>
              <starUtil v-if="item.commentGrade" :num="item.commentGrade"></starUtil>
            </div>
            <div class="btn" @click="toRouter(item.detailId)">评价</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <productCartUtil></productCartUtil> -->
  </section>
</template>

<style lang="less" scoped>
.comment {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .1rem;
    // background: white;
    .orderDetail {
      background: white;
      min-height: 1rem;
      margin-bottom: .1rem;
      padding: .1rem;
      border-radius: .03rem;
      display: flex;
      .productIcon {
        width: .8rem;
        height:.8rem;
        background-size: cover !important;
      }
      .productContent {
        flex: 1;
        padding-left: .1rem;
        .name {
          min-height: .5rem;
          font-size: .16rem;
        }
        .btnWrap {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .btn {
            width: .8rem;
            height: .3rem;
            line-height: .3rem;
            text-align: center;
            border: 1px solid #de9e5a;
            border-radius: .16rem;
            font-size: .16rem;
          }

        }
      }
    }
  }
  .commentTab {
    height: .3rem;
    display: flex;
    font-size: .16rem;
    align-items: end;
    justify-content: center;
    .wait {
      text-align: center;
      width: 1rem;
      height: .25rem;
      border-bottom: 0.02rem solid transparent;
      margin: 0 .3rem;
    }
    .active {
      text-align: center;
      width: 1rem;
      height: .25rem;
      border-bottom: 0.02rem solid red !important;;
      margin: 0 .3rem;
    }
    .done {
      text-align: center;
      width: 1rem;
      height: .25rem;
      border-bottom: 0.02rem solid transparent;
      margin: 0 .3rem;
    }
    
  }
}
</style>
